var menu = function () {
    this.html = $(`
    <div class="menu">
        <div class="logo">ViewMarker</div>
        <div class="menu_box">
            <div class="menu_item" id="project">
                <span>项目(P)</span>
                <div class="sub_menu" style="display:none">
                    <div class="subMenuItem">保存 <div class="key">Ctrl+S</div></div>
                    <div class="subMenuItem">另存为</div>
                    <div class="subMenuItem">导出HTML</div>
                </div>
            </div> 
            <div class="menu_item" id="resouce">
                <span>资源(R)</span>
                <div class="sub_menu" style="display:none">
                    <div class="subMenuItem">图片库</div>
                    <div class="subMenuItem">样式库</div>
                    <div class="subMenuItem">动画库</div>
                    <div class="subMenuItem">组件库</div>
                    <div class="subMenuItem_block"></div>
                    <div class="subMenuItem">导入资源库</div>
                    <div class="subMenuItem">导出资源库</div>
                </div>
            </div>
        </div>
    </div>`);

    // <div class="menu_item" id="perview">
    //     <span>预览(V)</span>
    // </div>

    this.menuStatus = false;
    var _this = this;

    this.html.find('.menu_item span').hover(function () {
        $(this).css({
            background: '#505050',
            color: '#fff'
        });
        if (_this.menuStatus) {
            _this.menuStatus = true;
            _this.html.find('span').removeClass('active');
            $(this).addClass('active');
            _this.html.find('.sub_menu').hide();
            $(this).parent().find('.sub_menu').show();
        };
    }, function () {
        $(this).css({
            background: '#323232',
            color: '#ccc'
        });
    });

    this.html.find('.menu_item span').click(function (e) {
        e.stopPropagation();
        if (_this.menuStatus) {
            _this.menuStatus = false;
            _this.html.find('span').removeClass('active');
            _this.html.find('.sub_menu').hide();
        } else {
            _this.menuStatus = true;
            $(this).addClass('active');
            _this.html.find('.sub_menu').hide();
            $(this).parent().find('.sub_menu').show();
        }
    });


    this.html.find();


    $(document).click(function () {
        _this.menuStatus = false;
        _this.html.find('span').removeClass('active');
        _this.html.find('.sub_menu').hide();
    });



};

export default menu;
